<template>
    <div class="me-red">
        <cube-scroll
                ref="scroll"
                :options="scroll_option"
                @pulling-up="upLoad"
                v-if="data.length > 0"
        >
            <item
                    v-for="(item,index) in data"
                    :data="item"
                    :key="item.id"
                    @click.native="clickItem(index)">
            </item>
        </cube-scroll>
        <empty v-else>您还没有发布的红包</empty>


        <!--S子页面-->
        <transition :name="transition_name">
            <router-view class="main-child"/>
        </transition>
        <!--E子页面-->
    </div>
</template>

<script>
import Item from "@c/red-item"
import Empty from "@c/empty"
export default {
    name: "me-red",
    data() {
        return {
            transition_name: 'change-path animate__animated animate__slideInRight animate__faster animate__delay-2s',
            data: [],
            limit: [0,10],
            loading: false, // 列表请求加载状态
            handle_index:0,
            // 滚动条配置
            scroll_option: {
                scrollbar:true,
                pullUpLoad:{
                    txt:{
                        more:"上拉加载",
                        noMore:"----我也是有底线的----"
                    }
                }
            }
        }
    },
    beforeRouteUpdate (to, from, next) {
        this.transition_name = to.path.split('/').length < from.path.split('/').length ? 'change-path animate__animated animate__slideOutRight animate__faster animate__delay-2s' : 'change-path animate__animated animate__slideInRight animate__faster animate__delay-2s'
        setTimeout(() => {
            next()
        },20)
    },
    components: {
        Item,
        Empty
    },
    mounted() {
        this.getList()
    },
    methods: {
        // Run
        /**
         * 获取列表
         */
        getList() {
            if(this.loading) return true
            this.loading = true
            return this.$sendGet("red/member/list",{
                limit: this.limit
            })
                .then((res) => {
                    this.loading = false
                    let data = res.data.data
                    if(data.length > 0) {
                        this.data.push(...data)
                        this.limit[0] += this.limit[1]
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,false);
                    } else {
                        if(this.data.length > this.limit[1]){
                            this.$refs.scroll && this.$refs.scroll.forceUpdate(true,true);
                        } else {
                            this.scroll_option.pullUpLoad = false;
                            this.$refs.scroll && this.$refs.scroll.refresh();
                        }
                    }
                });
        },
        /**
         * 上拉加载
         */
        upLoad() {
          this.getList()
        },
        // Handle
        // 点击item
        clickItem(index) {
            this.handle_index = index
            let data = this.data[this.handle_index]
            let sheet_data = [
                    {
                      content: '查看',
                      value: 'watch'
                    },
                    {
                        content: '修改',
                        value: 'edit'
                    }
                ]
                if(data.status === 4) {
                    sheet_data.push({
                        content: `<span>开始</span>`,
                        value: 'start'
                    })
                    sheet_data.push({
                        content: `<span style="color:red;">删除</span>`,
                        value: 'delete'
                    })
                } else {
                    sheet_data.push({
                        content: `<span style="color:red;">停止发红包</span>`,
                        value: 'stop'
                    })
                }
                this.$createActionSheet({
                    title: '操作',
                    data:sheet_data,
                    onSelect: (item) => {
                        switch(item.value) {
                            case 'watch':
                                this.watch()
                                break;
                            case 'edit':
                                this.edit()
                                break;
                            case 'start':
                                this.start()
                                break;
                            case 'stop':
                                this.stop()
                                break;
                            case 'delete':
                                this.delete()
                                break;
                        }
                    }
                }).show()
        },
        // 查看
        watch() {
            this.$router.push("me-red/me-red-scroll/"+this.data[this.handle_index].id)
        },
        // 修改
        edit() {
            let data = this.data[this.handle_index]
            this.$router.push("me-red/edit/"+data.red_type+"/"+data.id)
        },
        // 开始发红包
        start() {
            this.$sendPost('red/start/' + this.data[this.handle_index].id)
                .then(() => {
                    this.$set(this.data[this.handle_index],"status",2)
                })
                .catch((error) => {
                    this.$handleError(error, this)
                })
        },
        // 暂停发红包
        stop() {
            this.$sendPost('red/stop/' + this.data[this.handle_index].id)
                .then(() => {
                    this.$set(this.data[this.handle_index],"status",4)
                })
                .catch((error) => {
                    this.$handleError(error,this)
                })
        },
        /**
         * 删除红包
         */
        delete() {
            this.$createDialog({
                type: 'confirm',
                title: '提示',
                content: '删除后剩余未发红包金额返还，红包手续费不退，确定删除吗？',
                onConfirm: () => {
                    this.$del('red/' + this.data[this.handle_index].id)
                        .then(() => {
                            this.data.splice(this.handle_index,1)
                        })
                        .catch((error) => {
                            this.$handleError(error,this)
                        })
                }
            }).show()
        }
    }
}
</script>

<style scoped lang="less" src="./me-red.less"></style>
